import { SearchOutlined } from '@ant-design/icons';
import React from 'react';
import styles from './index.less';
import SearchIcon from './search.svg';

interface SearchBarView {
  [x: string]: any;
  value?: string;
  placeholder?: string;
  className?: string;
}

const SearchBarView: React.FC<SearchBarView> = (props) => {
  const { value, placeholder, className, ...rest } = props;

  return (
    <div className={`${styles.searchBar} inbiz-ecm-searchbar ${className}`} {...rest}>
      <div
        className={styles.searchBarInner}
        style={
          props.value
            ? {}
            : {
                color: '#999',
              }
        }
      >
        <div
          className="adm-search-bar-input-box-icon"
          style={{ color: '#999' }}
          dangerouslySetInnerHTML={{
            __html:
              '<svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="antd-mobile-icon" style="vertical-align: -0.125em;"><title>1A7F0A7E-6023-4A8C-9C26-4DD5452D0C85@2x</title><g id="SearchOutline-SearchOutline" stroke="none" fill="none" fill-rule="evenodd"><g id="SearchOutline-编组"><rect id="SearchOutline-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect><path d="M10.2434135,10.1505371 C17.2346315,3.28315429 28.5696354,3.28315429 35.5608534,10.1505371 C42.3159331,16.7859644 42.5440954,27.4048667 36.2453405,34.3093889 L43.7095294,41.6422249 C43.8671196,41.7970419 43.8693677,42.0502979 43.7145508,42.2078881 C43.7128864,42.2095822 43.7112069,42.2112616 43.7095126,42.2129259 L42.1705322,43.7246464 C42.014915,43.8775072 41.7655181,43.8775006 41.6099089,43.7246316 L34.0775268,36.3248916 L34.0775268,36.3248916 C27.0485579,41.8551751 16.7593545,41.4200547 10.2434135,35.0195303 C3.25219551,28.1521474 3.25219551,17.0179199 10.2434135,10.1505371 Z M12.3532001,12.2229532 C6.52718516,17.9457722 6.52718516,27.2242951 12.3532001,32.9471142 C18.1792151,38.6699332 27.6250517,38.6699332 33.4510667,32.9471142 C39.2770817,27.2242951 39.2770817,17.9457722 33.4510667,12.2229532 C27.6250517,6.50013419 18.1792151,6.50013419 12.3532001,12.2229532 Z" id="SearchOutline-形状" fill="currentColor" fill-rule="nonzero"></path></g></g></svg>',
          }}
        ></div>
        <div className={styles.inputWrapper}>{value || placeholder}</div>
      </div>
    </div>
  );
};

export default SearchBarView;
